<template>
  <div v-html="compiledMarkdown || '<p>No content</p>'"></div>
</template>

<script>
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
    data() {
    return {
      compiledHtml: '',
      updateQueue: null,
      lastUpdate: 0
    }
  },
  created() {
  marked.setOptions({
    breaks: true,        // 换行自动转<br>
    gfm: true,           // 启用GitHub风格
    smartLists: true,    // 智能列表
    sanitize: false,     // 关闭HTML过滤（确保内容安全）
    xhtml: true          // 生成符合XHTML的标签
  });
  
  // 预缓存常用高亮语言
  hljs.configure({
    languages: ['javascript', 'python', 'java', 'bash']
  });
},
    watch: {
    markdown: {
      immediate: true,
      handler(newVal) {
        // 使用requestAnimationFrame进行节流
        cancelAnimationFrame(this.updateQueue);
        this.updateQueue = requestAnimationFrame(() => {
          const start = performance.now();
          this.compiledHtml = marked.parse(newVal); 
          // 如果解析时间超过16ms（一帧时间），提示优化
          if (performance.now() - start > 16) {
            console.warn('Markdown解析耗时较长，建议优化内容');
          }
        });
      }
    }
  },
  props: {
    markdown: {
      type: String,
      required: true
    }
  },
  computed: {
    compiledMarkdown() {
      marked.setOptions({
        highlight: function (code, language) {
          const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
          return hljs.highlight(validLanguage, code).value;
        }
      });
      const result = marked(this.markdown);
      return result;
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
div {
  color: black; /* 确保文字颜色可见 */
  font-size: 12px;
}
</style>